<template>
   <div class="container">
     <!-- 轮播图 -->
     <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item,index) in list" :key="index">
        <!-- 轮播图中内嵌东西 -->
        <div
        class="banner-img"
        :style="`background:url(${item.url}) center center no-repeat;background-size:contain contain;`" 
        >
        </div>
      </el-carousel-item>
    </el-carousel>

    <!--搜索框 -->
    <el-row class="row-box">
      <div class="search-tab">
        <span v-for="(item,index) in options" :key="index"
        :class="{active: index === currentOption}"
        @click="handleOption(index)">
          <i>{{item.name}}</i>
        </span>
     </div>
     <div class="search-box">
        <input type="text" 
        v-model="searchVal"
        :placeholder="options[currentOption].placeholder"
        @keyup.enter="search">
        <i class="el-icon-search" @click="search"></i>
     </div>
    </el-row>
   </div>
</template>

<script>
export default {
    data(){
      return{
         list:[],
         currentOption:0,
         searchVal:'',
         options:[
           {
             name:'攻略',
             placeholder:'请输入城市搜索攻略',
             pageUrl:'/tourismStrategy'
           },
           {
             name:'酒店',
             placeholder:'请输入城市搜索酒店',
             pageUrl:'/hotel'
           },
           {
             name:'机票',
             placeholder:'请输入城市搜索机票',
             pageUrl:'/ticket'
           }
         ]
      }
    },
    methods:{
      loadBanner(){
         this.$axios({
           url:'/scenics/banners'
         }).then(res => {
             this.list = res.data.data.map(item=>{
                 return{
                   ...item,
                   url:this.$axios.defaults.baseURL + item.url
                 }
             });
         })
      },
      handleOption(index){
        if(index == 2){
           this.$router.push('/ticket');
           return;
        }
        this.currentOption = index;
      },
      search(){

        if(!this.searchVal)return;
        this.$router.push(this.options[this.currentOption].pageUrl+"?keyword="+this.searchVal);
      }
    },
    mounted(){
        this.loadBanner(); 
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-carousel__container{
    height:600px;
}
.banner-img{
   width:100%;
   height: 100%;
}
.container{
  position: relative;
}
.row-box{
  position: absolute;
  width: 550px;
  height: 90px;
  z-index:99;
  // left:50%;
  // top:50%;
  // margin-left:-275px;
  // margin-top:-45px;
  // 定位实现水平垂直居中6
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
.search-tab{
  width:100%;
  .active{
    i{
      color:#333;
     }
     &::after{
       background: #eee;
     }
  }
  span{
      position: relative;
      display: inline-block;
      width: 90px;
      height: 40px;
      margin-right:8px;
      font-size:18px;
      // 这里给了负的margin
      margin-bottom: -5px;
      cursor: pointer;
      &:after{
        box-sizing: border-box;
        position: absolute;
        left:0;
        top:0;
        display: block;
        content:'';
        width:100%;
        height:100%;
        border: 1px rgba(255,255,255,.2) solid;
        border-bottom: none;
        transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
        transform-origin: bottom left;
        background: rgba(0,0,0,.5);
        border-radius:1px 2px 0 0;
      } 
    i{
      display: block;
      position: absolute;
      width:100%;
      height:100%;
      line-height: 40px;
      text-align: center;
      z-index:2;
      font-style: normal;
      color: #fff;
      font-size: 16px;
    }
  }
}
.search-box{
  display: flex;
  width:100%;
  height: 48px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
}
input{
  flex:90%;
  padding-left:17px;
  font-size:16px;
  border-radius: 5px;
  &::placeholder{
     color: #757575;
     font-size:16px;
  }
}
.el-icon-search{
  flex:10%;
  font-size: 22px;
  color: #000;
  font-weight: 700;
  line-height: 48px;
}
</style>